@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/ui/drawer.less";


/*
 * Defines the color scheme of the top part of the page.
 *
 * Each page's header is designed to fit in with the general color scheme
 * of the page. Through this mixin, those colors can be set.
 *
 * The only required parameter is @topbar-bg. The other colors will be
 * generated based off these. Some pages may wish to alter the others as
 * well, if the generated colors aren't desired.
 */
.page-colors(@topbar-bg,
             @topbar-text-color: @default-text-color,
             @topbar-faded-text-color: #rb-ns-ui.colors[@grey-30],
             @topbar-link-color: @link-color,
             @topbar-border-color: greyscale(darken(@topbar-bg, 30%)),
             @topbar-menu-bg: @topbar-bg,
             @topbar-menu-selected-bg: lighten(@topbar-bg, 10%)) {
  #accountnav {
    .rb-c-actions__action:hover {
      border-color: @topbar-border-color;
    }

    .rb-c-menu {
      border-color: @topbar-border-color;
    }

    .rb-c-menu__item {
      background: @topbar-menu-bg;

      &:hover, &:focus {
        background: @topbar-menu-selected-bg;
      }
    }

    li {
      &:hover {
        background: @topbar-menu-selected-bg;
        border-color: lighten(@topbar-border-color, 5%);

        ul {
          border-color: @topbar-border-color;

          li:hover {
            background: @topbar-menu-selected-bg;
          }

          li.menu-info-box,
          li.menu-info-box:hover {
            /*
             * These are currently only used in RBCommons, but may be useful
             * for future accountnav features.
             */
            background: lighten(@topbar-menu-bg, 5%);
            border-bottom: 1px darken(@topbar-menu-bg, 5%) solid;
            padding: 1em;

            &, * {
              cursor: default;
            }
          }
        }
      }

      ul {
        background: @topbar-menu-bg;
      }
    }
  }

  #headerbar {
    border-bottom-color: @topbar-border-color;

    #nav_toggle {
      color: fadeout(@topbar-text-color, 20%);
    }

    #search {
      input {
        border-color: @topbar-border-color;
      }
    }
  }

  #navbar-container {
    background: @topbar-bg;
    border-color: @topbar-border-color;
  }

  #navbar {
    border-bottom-color: @topbar-border-color;

    a {
      color: @topbar-link-color;
    }
  }

  #page-sidebar {
    #rb-ns-pages.base.on-shell-mobile-mode({
      background-color: @topbar-bg;
      border-right-color: @topbar-border-color;
    });
  }

  #topbar {
    background: @topbar-bg;
    color: @topbar-text-color;

    .version {
      color: @topbar-faded-text-color;
    }
  }

  #rb-ns-ui.drawer.set-colors(@bg: @topbar-bg,
                              @border-color: @topbar-border-color,
                              @text-color: @topbar-text-color);

  #page-container .datagrid-header,
  .datagrid-header-drag.datagrid-header {
    background: @topbar-bg;
  }
}
